<template>
  <div>
    <el-card>
      <el-row type="flex" justify="end" class="btn_box">
        <el-tooltip class="item" effect="dark" content="添加元素" placement="top">
          <el-button @click="add_ele" type="success" icon="el-icon-plus" circle></el-button>
        </el-tooltip>
      </el-row>
      <el-table v-loading="loading" :data="tableData" border stripe style="width: 100%">
        <el-table-column prop="id" label="元素id"></el-table-column>

        <el-table-column prop="elementName" label="元素名称"></el-table-column>
        <el-table-column prop="elementUnit" label="元素单位"></el-table-column>
        <el-table-column prop="displayMax" label="展示最大值"></el-table-column>
        <el-table-column prop="displayMin" label="展示最小值"></el-table-column>
        <el-table-column prop="valueMax" label="最大值"></el-table-column>
        <el-table-column prop="valueMin" label="最小值"></el-table-column>
        <el-table-column prop="formula" label="缩放公式"></el-table-column>
        <el-table-column prop="isElement" label="是否是要素">
          <template slot-scope="info">
            <el-tag :type="info.row.isElement?'success':'danger'">{{info.row.isElement?'是':'否'}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="isRain" label="是否是雨量">
          <template slot-scope="info">
            <el-tag :type="info.row.isRain?'success':'danger'">{{info.row.isRain?'是':'否'}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="isWind" label="是否是风向">
          <template slot-scope="info">
            <el-tag :type="info.row.isWind?'success':'danger'">{{info.row.isWind?'是':'否'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="info">
            <el-button
              @click="up_ele(info.row)"
              icon="el-icon-edit"
              size="mini"
              type="primary"
              circle
            ></el-button>

            <el-button @click="up_ele_id(info.row.id)" size="mini" type="primary" plain>编辑id</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 编辑元素表单弹出框 -->
    <el-dialog title="编辑元素信息" :visible.sync="dialog_up_ele" width="50%" @close="close_ele">
      <!-- <span>这是一段信息</span> -->
      <el-form ref="form" :model="form_ele_up" label-width="100px">
        <el-form-item label="元素id">
          <el-input v-model="form_ele_up.id"></el-input>
        </el-form-item>
        <el-form-item label="元素名称">
          <el-input v-model="form_ele_up.elementName"></el-input>
        </el-form-item>

        <el-form-item label="元素单位">
          <el-input v-model="form_ele_up.elementUnit"></el-input>
        </el-form-item>

        <el-form-item label="展示最大值">
          <el-input v-model="form_ele_up.displayMax"></el-input>
        </el-form-item>

        <el-form-item label="展示最小值">
          <el-input v-model="form_ele_up.displayMin"></el-input>
        </el-form-item>

        <el-form-item label="最大值">
          <el-input v-model="form_ele_up.valueMax"></el-input>
        </el-form-item>

        <el-form-item label="最小值">
          <el-input v-model="form_ele_up.valueMin"></el-input>
        </el-form-item>

        <el-form-item label="缩放公式">
          <el-input v-model="form_ele_up.formula"></el-input>
        </el-form-item>
        <el-row class="switch_box" type="flex" justify="center">
          <!-- <el-form-item label="缩放公式"> -->
          <el-col :span="15" :push="1">
            <span>是否是要素</span>
            <el-switch
              v-model="form_ele_up.isElement"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </el-col>
          <el-col :span="13">
            <span>是否是雨量</span>
            <el-switch v-model="form_ele_up.isRain" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </el-col>

          <el-col>
            <span>是否是风向</span>

            <el-switch v-model="form_ele_up.isWind" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </el-col>
        </el-row>

        <!-- </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog_up_ele = false">取 消</el-button>
        <el-button type="primary" @click="up_ele_s">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改元素id -->
    <el-dialog title="编辑元素id" :visible.sync="dialog_up_ele_id" width="30%">
      <el-input placeholder="请输入新ID值" v-model="ele_id.newId" clearable></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog_up_ele_id = false">取 消</el-button>
        <el-button type="primary" @click="up_ele_id_s">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Qs from "qs";
export default {
  created() {
    this.one_data();
  },
  data() {
    return {
      tableData: [],
      //   编辑元素弹出框
      dialog_up_ele: false,
      //   元素编辑表单
      form_ele_up: {},
      //   点击切换到添加状态
      add_lock: false,
      //   修改后的新id
      ele_new_id: 0,
      //   老id
      ele_old_id: 0,
      //   修改id弹出框
      dialog_up_ele_id: false,
      ele_id: {},
      //   初次加载
      loading: true
    };
  },

  methods: {
    //   确认提交新id
    async up_ele_id_s() {
      let { data: res } = await this.$http.post(
        "/element/updateId",
        Qs.stringify(this.ele_id)
      );
      if (!this.msg(res)) return;
      this.ele_id = {};
      this.dialog_up_ele_id = false;
      this.one_data();
    },
    //   修改元素id弹出
    up_ele_id(id) {
      this.ele_id.oldId = id;
      this.dialog_up_ele_id = true;
    },
    //   添加元素
    add_ele() {
      this.add_lock = true;
      this.dialog_up_ele = true;
      this.form_ele_up.id = this.tableData.length;
    },
    // 一个弹出提示信息的方法
    msg(res) {
      if (res.status == 0) {
        this.$message.success(res.msg);
        return true;
      } else {
        this.$message.error(res.msg);
        // window.location.reload();
        return false;
      }
    },
    //   元素编辑弹出框
    close_ele() {
      this.one_data();
      this.form_ele_up = {};
    },
    // 确定提交元素编辑后的内容
    async up_ele_s() {
      // /element/add
      var url = "/element/update";
      if (this.add_lock) {
        url = "/element/add";
      }
      let { data: res } = await this.$http.put(url, this.form_ele_up);
      //   console.log(res);
      //   //   退出添加状态
      //   console.log(url);
      //   console.log(this.form_ele_up);

      if (!this.msg(res)) return;

      this.add_lock = false;
      this.dialog_up_ele = false;
    },
    //   点击编辑某一个元素
    up_ele(obj) {
      this.form_ele_up = obj;
      this.dialog_up_ele = true;
      console.log(this.form_ele_up);
    },
    async one_data() {
      let { data: res } = await this.$http("/element/list");
      this.tableData = res.datas;
      this.loading = false;
    }
  }
};
</script>

<style lang='less' scoped>
.switch_box {
  display: flex;
}
</style>
